﻿@{ ViewBag.Title = "jQuery UI Grid [Stage 1] in ASP.NET MVC - Data Model"; }
@section Css {
    <link href="@Url.Content("~/Content/grid-datamodel.css")" rel="stylesheet" type="text/css" />
}
<table id="products">
    <thead>
        <tr>
		    <th data-field="Id">Id</th>
	        <th data-field="Name">Name</th>
		    <th data-field="Supplier">Supplier</th>
            <th data-field="Category">Category</th>
            <th data-field="QuantityPerUnit">Quantity Per Unit</th>
            <th data-field="UnitPrice">Unit Price</th>
            <th data-field="UnitsInStock">Units In Stock</th>
	    </tr>
	</thead>
	<tbody>
	</tbody>
</table>
<script type="text/x-jquery-tmpl" id="products-row-tmpl">
    <tr>
	    <td>${Id}</td>
	    <td>${Name}</td>
	    <td>${Supplier}</td>
        <td>${Category}</td>
        <td>${QuantityPerUnit}</td>
        <td>${UnitPrice}</td>
        <td>${UnitsInStock}</td>
    </tr>
</script>
@section JavaScript {
    <script src="@Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datamodel/dataitem.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datamodel/datasource.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datamodel/extractor-datasource.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datamodel/datastore.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datamodel/grid.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ui.dataitem.extend('product', {});
            $.ui.datasource({
                type: 'product',
                source: function (request, response) {
                    $.getJSON('@Url.Action("Products", "Home")', request, response);
                }
            });

            $('#products').grid({
                type: 'product',
                rowTemplate: $('#products-row-tmpl').html()
            });
        });
    </script>
}